<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  	<title>
		<s:if test="#request.statisticalType == 1" >账务统计(个人奖励)</s:if>
		<s:elseif test="#request.statisticalType == 2" >账务统计(公司利润)</s:elseif>
		<s:elseif test="#request.statisticalType == 3" >订单统计(委托人)</s:elseif>
		<s:elseif test="#request.statisticalType == 4" >订单统计(员工)</s:elseif>
		<s:elseif test="#request.statisticalType == 5" >订单统计(服务商)</s:elseif>
  	</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/style.css" type="text/css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/common.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jquery.bgiframe.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/popdiv.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/searchdata.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/My97DatePicker/WdatePicker.js"></script>
	
	<style>
		input{border:1px solid #B5BCC2; height: 23px;}
		.main_div{width: 950px; padding: 20px;}
		.unchecked{background:url(${pageContext.request.contextPath}/cts/images/unchecked.png) no-repeat left center; padding-left:18px; width:auto; height:16px; border: 0;
			display:block-inline; color:#3659B7; cursor:pointer;
		}
		.checked{background:url('${pageContext.request.contextPath}/cts/images/checked.png') no-repeat left center; padding-left:18px; width:auto; height:16px; border: 0;
			display:block-inline; color:#3659B7; cursor:pointer;
		}
		.tab4{text-align: center; margin-top: 5px; table-layout: fixed;}
		.tab4 thead th{color: #868686; border-bottom:1px solid #686868; padding: 5px 0 5px 0;}
		.tab4 tbody td{color: #686868; font-size:16px; font-weight:bold; border-bottom:1px dashed #686868; padding: 8px 0 8px 0; cursor: pointer;}
		.tab4 .last_row td{border-bottom:1px solid #686868;}
		.tab4 .border_none td{border-bottom:none;}
		.tab1 tbody td,.tab1 thead td{font-size:12px; font-weight:normal; border-bottom:1px solid; padding:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
		.tab1{background-color: #F9F1CD; table-layout: fixed;}
		.search_middle{text-align:left; width:950px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_middle_bg.png') repeat-y;}
		.search_top{width:950px; height: 15px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_top_bg.png') no-repeat;}
		.search_bottom{width:950px; height: 15px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_top_bg2.png') bottom no-repeat;}
		.search_main{padding-left: 10px; padding-right: 10px; color: #3659B7;}
		.search_status{text-align: left; color: #3659B7; float: right;}
		.tr_div{width: 675px; padding: 10px; border: 1px solid #b6bcc1; background-color: white; margin-left: 15px; text-align:center; cursor: default;}
		.tr_div .tab1 *{cursor: default; }
		.a_count_active{color: #AD1045; text-decoration: none;}
		.div_up{background: url('${pageContext.request.contextPath}/cts/images/up.png') no-repeat; width: 35px; height: 21px; 
			position: relative; margin-top: -25px; margin-bottom: 3px;}
		<s:if test="#request.statisticalType >= 3">
			.tab4 tbody td{cursor: default;}
			.tr_div{margin: 0 auto;}
			.div_up{margin-left:520px; _margin-left:400px;}
			<s:if test="#request.statisticalType == 4">
				.tr_div{width: 725px}
				.div_up{margin-left:545px; _margin-left:400px;}
			</s:if>
			<s:elseif test="#request.statisticalType == 5">
				.tr_div{width: 95%}
				.div_up{margin-left:635px; _margin-left:400px;}
			</s:elseif>
		</s:if>
		<s:else>
			.div_up{margin-left:145px; _margin-left:-350px;}
		</s:else>
	</style>
  </head>
  
  <body class="body_bg">
	<form id="form" autocomplete="off">
		<input type="hidden" id="companyId" name="companyId" value="<s:property value="#request.company.id" />" />
		<input type="hidden" id="employeeId" name="employeeId" value="<s:property value="#request.employee.id" />" />
		<input type="hidden" id="statisticalType" name="statisticalType" value="<s:property value="#request.statisticalType" />" />
		<input type="hidden" id="status1" name="status1" value="0" />
		<input type="hidden" id="status2" name="status2" value="0" />
		<input type="hidden" id="status3" name="status3" value="0" />
		<input type="hidden" id="status4" name="status4" value="0" />
		
	  	<div class="main_div">
	  		<div class="search_middle">
	  			<div class="search_top">&nbsp;</div>
	  			<div class="search_main">
	  				<div style="display:inline; _float: left;">
	  					<s:if test="#request.statisticalType == 4" >
				  			员工：<input type="text" id="client" name="client" value="<s:property value="work.client1.nickname"/>" style="width:100px"
									onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=0',this.value,'client','clientId',0,235);"/>
				  				<input type="hidden" id="clientId" name="clientId" />
				  		</s:if>
				  		<s:else>
				  			<s:if test="#request.statisticalType == 3" >委托方：</s:if>
				  			<s:elseif test="#request.statisticalType == 5" >服务商：</s:elseif>
				  			<input type="text" id="client" name="client" value="<s:property value="work.client1.nickname"/>" style="width:100px"
									onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=1',this.value,'client','clientId',0,235);"/>
				  				<input type="hidden" id="clientId" name="clientId" />
				  		</s:else>
			  			&nbsp;&nbsp;&nbsp;&nbsp;
			  			订单委托月份：<input type="text" id="minMonth" name="minMonth" style="width:78px;" class="input_date" onfocus="WdatePicker({dateFmt:'yyyy-MM',maxDate:'#F{$dp.$D(\'maxMonth\')||\'%y-%M-%d\'}'})"/> 至
			  			<input type="text" id="maxMonth" name="maxMonth" style="width:78px;" class="input_date" onfocus="WdatePicker({dateFmt:'yyyy-MM',maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\'minMonth\')}'})"/>
			  			&nbsp;&nbsp;&nbsp;&nbsp;
			  			<s:if test="#request.statisticalType == 2">
				  			团队：<input type="text" id="team" name="team" value="<s:property value="work.client1.nickname"/>" style="width:100px"
									onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=0',this.value,'team','teamId',0,235);"/>
				  				<input type="hidden" id="teamId" name="teamId" />
				  			&nbsp;&nbsp;&nbsp;&nbsp;
			  			</s:if>
			  			<s:elseif test="#request.statisticalType >= 3">
				  			委托项目：
				  			<select id="itemTypeId" name="itemTypeId" style="width:100px;">
								<option>全部</option>
								<s:iterator value="%{#request.items}">
									<option value="<s:property value="id"/>"><s:property value="name"/></option>
								</s:iterator>
							</select>
			  			</s:elseif>
			  			订单标签：
		  				<input type="text" id="tag" name="tag" style="width:100px" />
			  			&nbsp;&nbsp;&nbsp;&nbsp;
			  			<s:if test="#request.statisticalType == 1">
				  			奖励对象：<input type="text" id="reward" name="reward" value="<s:property value="work.client1.nickname"/>" style="width:100px"
									onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=all',this.value,'reward','rewardId',0,235);"/>
				  				<input type="hidden" id="rewardId" name="rewardId" />
			  			</s:if>
		  			</div>
		  			<div style="float: right;">
		  				<a class="a_btn1" href="javascript:search()">筛选</a>
	  					<a class="a_btn1" href="javascript:exportExcel()">导出</a>
		  			</div>
	  			</div>
	  			<div class="search_bottom">&nbsp;</div>
	  		</div>
			<s:if test="#request.statisticalType < 3" >
		  		<div class="search_status" style="float: left; width:950px; margin-top: 5px;">
			  		<div  class="search_status">
			  			<s:if test="#request.statisticalType == 1" >
			  				<div class="unchecked" onclick="changeStatus(this,1)">未奖励的订单&nbsp;&nbsp;&nbsp;&nbsp;</div>
			  			</s:if>
			  			<div class="unchecked" onclick="changeStatus(this,2)">已归档的订单&nbsp;&nbsp;&nbsp;&nbsp;</div>
			  			<div class="unchecked" onclick="changeStatus(this,3)">应收已收的订单&nbsp;&nbsp;&nbsp;&nbsp;</div>
			  			<div class="unchecked" onclick="changeStatus(this,4)">应付已付的订单</div>
			  		</div>
		  		</div>
	  		</s:if>
	  		<div>
				<s:if test="#request.statisticalType < 3" >
		  			<div style="text-align: left; color: #AD1045; font-size: 16px; padding-left: 10px;">
			  			<s:if test="#request.statisticalType == 1" >奖励合计：</s:if><s:elseif test="#request.statisticalType == 2">毛利合计：</s:elseif>
						<select id="currency" name="currency" onchange="search()" style="color: #AD1045; font-size: 16px;">
							<s:iterator value="%{#request.currencys}">
								<option value="<s:property value="id"/>"><s:property value="type"/></option>
							</s:iterator>
						</select>
			  			<span id="total">0.00</span>
		  			</div>
		  			<table id="statisticalTab" width="100%" cellpadding="0" cellspacing="0" class="tab4">
		  				<thead>
			  				<tr>
			  					<th width="100px;">订单委托月份</th>
			  					<th width="180px">委托方</th>
			  					<th width="60px">订单数</th>
			  					<th width="140px">毛利润</th>
					  			<s:if test="#request.statisticalType == 2">
			  						<th width="140px">公司利润</th>
					  			</s:if>
			  					<th width="140px">奖励</th>
			  					<th>&nbsp;</th>
			  				</tr>
		  				</thead>
		  				<tbody>
		  				</tbody>
		  			</table>
	  			</s:if>
	  			<s:else>
		  			<table id="statisticalTab" width="100%" cellpadding="0" cellspacing="0" class="tab4">
		  				<thead>
			  				<tr>
			  					<th width="300px;">
									<s:if test="#request.statisticalType == 3" >委托方</s:if>
									<s:elseif test="#request.statisticalType == 4" >员工</s:elseif>
									<s:elseif test="#request.statisticalType == 5" >服务商</s:elseif>
			  						(总订单数:<span id="total">0</span>票)
			  					</th>
			  					<th width="150px">委托月份</th>
			  					<th width="150px">委托项目</th>
			  					<th width="150px">订单数</th>
			  					<th>&nbsp;</th>
			  				</tr>
		  				</thead>
		  				<tbody>
		  				</tbody>
		  			</table>
	  			</s:else>
	  			<p id="data_success" style="text-align: center;display: none;">数据显示完毕</p>
	  		</div>
	  	</div>
	</form>
  </body>
	<script>
		$(function(){
			$('.unchecked').each(function(){
				$(this).click(function(){
					changeChecked(this);
				});
			});
			$('input:text').each(function(){
				var div = $("<span class='input_middle'></span>");
				div.append("<span class='input_left'><span class='input_right'></span></span>");
				$(this).after(div);
				div.find('.input_right').append(this);
			})
			search();
		})
		function changeStatus(obj,flag){
			$('#status'+flag).val(obj.className != 'checked' ? 1 : 0);
			search();
		}
		function search(){
			var param = $('#form').serialize();
			var tab = $('#statisticalTab');
			var colspan = tab.find('thead th').length;
			tab.find('tbody').html(
				"<tr class='border_none'><td colspan='"+colspan+"'><div>"+
				"<img src='${pageContext.request.contextPath}/cts/images/loading.gif'/></div></td></tr>");
			$('#data_success').hide();
			$.post('cts/statisticalWorks',param,function(html){
				tab.find('tbody').html(html);
			$('#data_success').show();
			})
		}
		function openItems(obj,employee,date,itemId){
			var param = $('#form').clone();
			param.find('#currency').val($('#currency').val())
			param.find('#employeeId').val(employee);
			if(itemId && !isNaN(itemId)){
				param.find('#itemTypeId').val(itemId);
			}
			param = param.serialize();
			param += '&delegateTime=' + date;
			var className = obj.className;
			$(obj).addClass('border_none');
			var tr = $(obj).next();
			if(tr.find('.tr_div').length > 0){
				if(tr.css('display') == 'none'){
					closeItems();
					$(obj).find('.a_count').addClass('a_count_active');
					tr.show();
				}else{
					closeItems();
				}
				return;
			}
			closeItems();
			var colspan = $(obj).find('td').length;
			tr = $("<tr></tr>").attr('class',className);
			tr.html(
				"<td colspan='"+colspan+"' align='left'><div class='tr_div'>"+
				"<div class='div_up'>&nbsp;</div>" +
				"<img src='${pageContext.request.contextPath}/cts/images/loading.gif'/></div></td>");
			$(obj).after(tr);
			$(obj).find('.a_count').addClass('a_count_active');
			$.post('cts/statisticalItems',param,function(html){
				tr.find('.tr_div').html(html);
			})
		}
		function closeItems(){
			$('.a_count').removeClass('a_count_active');
			$('.tr_div:visible').each(function(){
				var tr = $(this).parents('tr:first');
				tr.prev().removeClass('border_none');
				tr.hide();
			})
		}
		function exportExcel(){
			var param = $('#form').serialize();
			window.location.href = "exportStatisticsWorks?" + param;
		}
	</script>
</html>
